﻿{% load static %}
<!DOCTYPE html>
<html lang="">
<head>
    <title>home</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="{% static 'css/index.css' %}">
    <link rel="stylesheet" href="{% static 'css/home.css' %}">
    <script src="{% static 'js/vue.js' %}"></script>
    <script src="{% static 'element-ui/index.js' %}"></script>
    <link rel="stylesheet" href="{% static 'element-ui/index.css' %}">
    <script src="{% static 'js/axios.js' %}"></script>
    <script src="{% static 'js/flower.js' %}"></script>
    <style>
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .demonstration {
            display: block;
            color: #8492a6;
            font-size: 14px;
            margin-bottom: 20px;
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #f9f9f9;
            padding: 20px;
            z-index: 9999;
        }

        .container {
            position: relative;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 1px solid;
        }

        #parent {
            position: relative;
            width: 400px;
            height: 400px;
            left: 25px;
            border-radius: 50%;
        }

        .child {
            position: absolute;
            width: 50px;
            height: 50px;
            top: 175px;
            left: 175px;
            border-radius: 50%;
            animation: move 6s linear infinite;
            z-index: 1;
        }

        .change > .el-button {
            position: absolute;
            left: 5px;
        }

        .change {
            position: absolute;
            width: 50px;
            left: 175px;
            background: white;
            z-index: 2;
        }

        .manu2 {
            width: 80px;
            position: absolute;
            right: 20px;
            top: 64px;
            display: flex;
            flex-direction: column;
            z-index: 401;
            background: white;
            animation-name: start3;
            animation-duration: 500ms;
            animation-fill-mode: forwards
        }

        body {
            overflow-y: hidden;
        }

        @keyframes start3 {
            from {
                height: 0;
            }
            to {
                height: 60px;
            }
        }

        .left_div {
            width: 12%;
            position: absolute;
            left: 1%;
            bottom: 90px;
            height: 400px;
            z-index: 400;
        }

        #main_div {
            width: 60%;
            height: 670px;
            position: absolute;
            top: 80px;
            left: 15%;
            overflow-y: scroll;
            display: flex;
            flex-shrink: 0;
            flex-direction: column;
            padding-bottom: 10px;
            z-index: 400;

        }

        #main_div::-webkit-scrollbar {
            width: 0; /* 设置滑动条宽度为0 */
            height: 0; /* 设置滑动条高度为0 */
        }

        /* 自定义滑动块样式 */
        #main_div::-webkit-scrollbar-thumb {
            background-color: transparent; /* 设置滑动块背景色为透明 */
        }

        .right_div {
            width: 20%;
            position: absolute;
            height: 670px;
            top: 90px;
            right: 5%;
            display: flex;
            flex-direction: column;
            z-index: 400;

        }

        /* 走马灯 */
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 200px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        #home {
            position: relative;
            height: 100vh;
        }

        .el-dropdown-menu__item {
            padding-right: 0;
            padding-left: 0;
            text-align: center;
        }

        .liutitle {
            height: 12%;
            width: 60%;
            position: absolute;
            font-size: 24px;
            text-align: center;
            left: 20%;
            top: 5%
        }

        .liuyan {
            height: 72%;
            width: 70%;
            position: absolute;
            left: 15%;
            top: 25%
        }

        .liuinput {
            width: 100%;
            min-height: 100%;
            border-radius: 10px;
            border: 1px dashed;
            font-size: 20px;
        }

        .pinlun {
            border-top: 1px solid;
            width: 100%;
            height: 68%;
            position: absolute;
            top: 30%;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            overflow-y: scroll;
        }

        .pinlun2 {
            border-top: 1px solid;
            width: 100%;
            height: 68%;
            position: absolute;
            top: 30%;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            overflow-y: scroll;
        }

        .liutitle2 {
            height: 12%;
            width: 60%;
            position: absolute;
            text-align: center;
            left: 5%;
            bottom: 10%
        }

        .pinchild {
            position: relative;
            width: 100%;
            height: auto;
            min-height: 150px;
            margin-top: 10px;
            border-bottom: 1px solid;
        }

        .pinchild2 {
            position: relative;
            width: 100%;
            height: auto;
            min-height: 150px;
            margin-top: 10px;
            border-bottom: 1px solid;
        }


        .title_content {
            width: 381px;
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
            white-space: nowrap; /* 禁止文本换行 */
        }

        .dog1 {
            width: 100%;
            height: 70px;
            background: white;
            display: flex;
            flex-direction: row;
            z-index: 400;
        }

        @keyframes color-change-animation {
            0% {
                color: pink;
            }
            25% {
                color: deeppink;
            }
            50% {
                color: deepskyblue;
            }
            100% {
                color: skyblue;
            }
        }
    </style>
</head>
<body>
<div id="home" style="width: 100%;height: 100%">
    <template>
        <el-dialog title="好友" :visible.sync="friends_1" width="400px" height="400px">
            <el-dialog
                    width="30%"
                    height="300px"
                    title=""

                    :visible.sync="friends_2"
                    append-to-body>

                <div v-show="f_type===1" style="width: 392px;height: 250px;position: relative">
                    <div style="position: absolute;width: 280px;height: 40px;left: 56px;top:15px;">
                        <el-form :inline="true" class="demo-form-inline">
                            <el-form-item>
                                <el-input v-model="friends_id" placeholder="鱼号ID"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" circle type="primary"
                                           @click="find_fid"></el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="position: absolute;border: 1px dashed;border-radius: 10px;width: 280px;height: 120px;left: 56px;top:65px;"
                         v-for="f in friends">
                        <div style="position: absolute; width: 60px;height: 110px;left: 10px;top: 10px;">
                            <el-avatar shape="square" :size="60" fit="fill"
                                       :src="f.img"></el-avatar>
                        </div>
                        <div style="position: absolute;width: 100px;height:40px;right: 90px;top: 30px;text-align: center;font-size: 24px "
                             v-text="f.nickname"></div>
                        <div style="position: absolute;width: 100px;height: 40px;right: 90px;bottom: 5px; ">
                            <el-button type="success" style="width: 80px" v-show="f.statu" @click="add_friend">添加
                            </el-button>
                            <el-button type="info" disabled style="width: 80px" v-show="!f.statu"
                                       v-text="f.reason"></el-button>
                        </div>
                    </div>

                </div>
                <div v-show="f_type===2"
                     style="width: 392px;height: 250px;position: relative;display: flex;flex-direction: column">
                    <div style="border-radius:6px;border: 1px dashed; position: relative;height: 40px;width: 260px;left: 66px;margin-top: 7px;display: flex;flex-direction: row"
                         v-for="(rf,index) in refriends">
                        <div style="position: absolute;width: 40px;height: 40px;left: 5px;">
                            <el-avatar shape="square" :size="40" fit="fill"
                                       :src="rf.img"></el-avatar>
                        </div>
                        <div style="position: absolute;width:100px;height:30px;top: 10px;left:48px ; text-align: left;font-size: 20px; "
                             v-text="rf.nickname"></div>
                        <div style="width: 80px;height: 40px;position: absolute;right: 8px;display: flex;flex-direction: row">
                            <el-button type="success" icon="el-icon-check" @click="dofriend(rf.id,1,index)"
                                       circle></el-button>
                            <el-button type="danger" icon="el-icon-close" @click="dofriend(rf.id,0,index)"
                                       circle></el-button>
                        </div>
                    </div>
                </div>
            </el-dialog>
            <div style="width: 360px;height: 95px;position: relative">
                <el-button type="primary" @click="friends_2 = true;f_type=1;friends=[]"
                           style="position: absolute;left: 131px;">
                    <i class="el-icon-plus"></i>
                    添加好友
                </el-button>
                <el-button type="info" @click="getfList"
                           style="position: absolute;left: 131px;top: 45px;margin-left: 0">
                    <i class="el-icon-message"></i>
                    查看申请
                </el-button>
            </div>

        </el-dialog>
    </template>

    <!-- 主菜单 -->
    <div class="dog1">
        <div style="width: 33%">
            <el-menu default-active="1" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"
                              @click="to_home"
                              style="text-align:center;font-style: italic;font-weight: lighter;font-size: 30px;width: 40%">
                    NoFishing
                </el-menu-item>
                <el-menu-item index="2"
                              @click="get_resou"
                              style="text-align:center;font-style: italic;font-weight: lighter;font-size: 30px;width: 30%">
                    热搜
                </el-menu-item>
                <el-menu-item index="3"
                              @click="friends_1=true"
                              style="text-align:center;font-style: italic;font-weight: lighter;font-size: 30px;width: 30%">
                    好友
                </el-menu-item>

            </el-menu>
        </div>
        <div style="width: 27%;position: relative">
            <div style="width: 60%;position: absolute;left: 10%;top:15%">
                <el-input
                        placeholder="请输入关键字"
                        prefix-icon="el-icon-search"
                        v-model="key"
                        clearable>
                </el-input>
            </div>
            <div style="width: 26%;position: absolute;right: 0;top:15%">
                <el-button type="primary" icon="el-icon-search" circle @click="findbyKey"></el-button>
            </div>
        </div>
        <div style="width: 30%">
            <el-menu class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"
                              @click="to_about"
                              style="text-align:center;font-style: italic;font-weight: lighter;font-size: 30px;width: 50%">
                    关于我们
                </el-menu-item>
                <el-menu-item index="2"
                              @click="to_fabu"
                              style="text-align:center;font-style: italic;font-weight: lighter;font-size: 30px;width: 50%">
                    发布文章
                </el-menu-item>
            </el-menu>
        </div>
        <div style="width: 50px;height: 50px;position: absolute;right: 20px;top: 10px" @mouseenter="showmenu">
            <el-avatar shape="square" :size="50" :src="user.img"></el-avatar>
        </div>
    </div>
    <div style="position: fixed;bottom: 60px;right: 2px;height: 600px;width: 60px" @mouseenter="flower=true"
         @mouseleave="flower=false">
        <button onclick="stopp()"
                v-show="flower"
                style="cursor: pointer;position:absolute;bottom: 30px"
                :style="{width: '50px', height: '50px', borderRadius: '50%', border: 'none', backgroundImage: 'url(' + user.img + ')', backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }">
        </button>
    </div>
    <div class="manu2" v-show="menu">
        <div @click="to_my" style="width: 80px;height: 50%">
            <el-dropdown-item style="width: 80px;height: 100%;">我的</el-dropdown-item>
        </div>
        <div @click="exit_" style="width: 80px;height: 50%">
            <el-dropdown-item style="width: 80px;height: 100%;">退出</el-dropdown-item>
        </div>
    </div>
    <!-- 回复区 -->
    <el-drawer
            title="回复区"
            :visible.sync="drawer2"
            direction="ltr"
            :with-header="false"
            :before-close="closeReply"
            size="50%">
        <div style="position: absolute;width: 100%;height: 30%">
            <div class="liutitle2">
                <el-input v-model="reply.comment" placeholder="回复"
                          style="position: absolute;left: 0;width: 75%;height: 100%"></el-input>
                <el-button style="position: absolute;left: 80%;text-align: center" round @click="add_reply">回复
                </el-button>
            </div>
            <div class="pinchild2">
                <div style="width: 100%;height: 40px;position: absolute;top:0">
                    <div style="width: 40px;height: 40px;position: absolute;left: 5px;">
                        <el-avatar shape="square" :size="40" fit="fill"
                                   :src="cnt_rpy.uimg"></el-avatar>
                    </div>
                    <div style="position: absolute;left: 50px;top:10px ;width:200px;height: 30px;font-size: 20px"
                         v-text="cnt_rpy.nickname"></div>
                    <div style="position: absolute;right: 2px;top: 10px;height:30px;width: 160px;font-size:12px"
                         v-text="showTime(cnt_rpy.time)"></div>
                </div>
                <div style="color:gray;position: absolute;width: 80%;height:auto;left: 10%;top:45px;border-radius: 10px"
                     v-text="cnt_rpy.comment">
                </div>
                <div style="position: absolute;width: 80px;height: 40px;bottom: 4px;right: 4px;font-size: 25px;font-style: italic;font-weight: lighter;animation: color-change-animation 5s infinite;">
                    楼主
                </div>
            </div>
        </div>

        <!-- 回复区 -->
        <div class="pinlun2" ref="huifu">
            <div class="pinchild2" v-for="reply in replies">
                <div style="width: 100%;height: 40px;position: absolute;top:0">
                    <div style="width: 40px;height: 40px;position: absolute;left: 5px;">
                        <el-avatar shape="square" :size="40" fit="fill"
                                   :src="reply.uimg"></el-avatar>
                    </div>
                    <div style="position: absolute;left: 50px;top:10px ;width:200px;height: 30px;font-size: 20px"
                         v-text="reply.nickname"></div>
                    <div style="position: absolute;right: 2px;top: 10px;height:30px;width: 160px;font-size:12px"
                         v-text="showTime(reply.time)"></div>
                </div>
                <div style="color:gray;position: absolute;width: 80%;height:auto;left: 10%;top:45px;border-radius: 10px"
                     v-text="reply.comment">
                </div>
            </div>

        </div>
    </el-drawer>

    <!-- 评论区 -->
    <el-drawer
            title="评论区"
            :visible.sync="drawer"
            :before-close="closeContent"
            :with-header="false"
            size="50%"
    >
        <div style="position: relative;width: 100%;height: 100%;display: flex;flex-direction: column">
            <div style="position: absolute;width: 100%;height: 30%">
                <div class="liutitle">
                    留言框
                </div>
                <!-- 留言框 -->
                <div class="liuyan">
                    <textarea class="liuinput" v-model="content.comment"></textarea>
                    <el-button type="primary" icon="el-icon-edit"
                               style="width: 30%;height: 40px;position: absolute;right: 10px;bottom: 10px"
                               @click="add_content">发表
                    </el-button>
                </div>
            </div>

            <!-- 评论区 -->
            <div class="pinlun" ref="pinlun">
                <div class="pinchild" v-for="content in contents">
                    <div style="width: 100%;height: 40px;position: absolute;top:0">
                        <div style="width: 40px;height: 40px;position: absolute;left: 5px;">
                            <el-avatar shape="square" :size="40" fit="fill"
                                       :src="content.uimg"></el-avatar>
                        </div>
                        <div style="position: absolute;left: 50px;top:10px ;width:200px;height: 30px;font-size: 20px"
                             v-text="content.nickname"></div>
                        <div style="position: absolute;right: 2px;top: 10px;height:30px;width: 160px;font-size:12px"
                             v-text="showTime(content.time)"></div>
                    </div>
                    <div style="color:gray;position: absolute;width: 80%;height:auto;left: 10%;top:45px;border-radius: 10px"
                         v-text="content.comment"></div>
                    <div style="position: absolute;width: 80px;height: 40px;bottom: 4px;right: 4px">
                        <el-button icon="el-icon-s-comment" circle @click="openReply(content.cid,content)"></el-button>
                    </div>
                </div>

            </div>
        </div>
    </el-drawer>
    <div class="left_div">
        <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="昵称 NickName" name="1">
                <div v-text="user.nickname"
                     style="font-size: 16px;font-style: italic;font-weight: lighter;position: relative;left: 5px"></div>
            </el-collapse-item>
            <el-collapse-item title="头像 Avatar" name="2">
                <div>
                    <el-image
                            style="width: 170px; height: 120px"
                            :src="user.img"
                            fit="contain"></el-image>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
    <!-- 主区域 -->
    <div id="main_div" ref="main">
        <!-- 文章列表框 -->
        <div class="u53" v-for="(item,index) in articles"
             style="cursor: pointer;margin-bottom:12px;"
             @click="to_xq(item)">
            <!-- 文章标题 -->
            <div class="u54">
                <span v-text="item.title"
                      style="font-weight: bold;font-style: italic;min-width: 400px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"></span>
            </div>
            <!-- 文章封面 -->
            <div style="width:165px ;height: 219px;position: absolute;left: 0;">
                <el-image
                        style="width: 165px; height: 219px;border-radius: 10px 0 0 10px"
                        :src="item.img"
                        fit="fill" lazy></el-image>
            </div>
            <!-- 文章内容-->
            <div class="u55" v-html="item.content">
            </div>

            <div style="position: absolute;width: 381px;height:43px;bottom: 0;left: 196px;">
                <div style="position: absolute;width: 190px;height: 25px;left: 10px;bottom: 0;display: flex;flex-direction: row">
                    <div style="width: 40px">作者:</div>
                    <div style="width: 150px" v-text="item.nickname">构造</div>
                </div>
                <!-- 点赞 -->
                <div class="u57">
                    <!-- 点赞按钮 -->
                    <div v-show="!item.islove">
                        <el-badge :value="item.loveNum" class="item" :max="99">
                            <el-button icon="el-icon-star-off" circle
                                       @click.stop="change_love(item.art_id,index,0)"></el-button>
                        </el-badge>
                    </div>
                    <div v-show="item.islove">
                        <el-badge :value="item.loveNum" class="item" :max="99">
                            <el-button type="warning" icon="el-icon-star-on" circle
                                       @click.stop="change_love(item.art_id,index,1)"></el-button>
                        </el-badge>
                    </div>
                </div>
                <!-- 评论 -->
                <div class="u58">
                    <el-badge :value="item.pinNum" class="item" :max="99">
                        <el-button icon="el-icon-s-comment" circle
                                   @click.stop="openContent(item.art_id)"></el-button>
                    </el-badge>
                </div>
                <!-- 分享 -->
                <div class="u61">
                    <el-button icon="el-icon-share" circle></el-button>
                </div>

            </div>
        </div>
    </div>
    <div class="right_div">
        <el-card shadow="hover" style="width: 80%" v-for="(i,index) in tags">
            <div style="display: flex;flex-direction: row;width: 80%;height: 100%;cursor: pointer"
                 @click="getF2(index)">
                <div v-text="i" style="width: 40px"></div>
                <div style="position: relative;bottom: 5px">
                    <el-tag type="success" v-text="i" style="border-radius: 15px"></el-tag>
                </div>
                <div style="position: relative;bottom: 5px;left: 5px">
                    <el-tag v-text="tagCount[index]" style="border-radius: 15px"></el-tag>
                </div>
            </div>

        </el-card>
    </div>
</div>
<script src="{% static 'js/home.js' %}"></script>
<script src="{% static 'js/click_tp.js' %}"></script>
</body>
</html>
